<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>控制台</title>
  <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
  <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    /** 统计快捷方式样式 */
    .console-link-block {
      font-size: 16px;
      padding: 20px 20px;
      border-radius: 4px;
      background-color: #40D4B0;
      color: #FFFFFF !important;
      box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
      position: relative;
      overflow: hidden;
      display: block;
    }

    .console-link-block .console-link-block-num {
      font-size: 40px;
      margin-bottom: 5px;
      opacity: .9;
    }

    .console-link-block .console-link-block-text {
      opacity: .8;
    }

    .console-link-block .console-link-block-icon {
      position: absolute;
      top: 50%;
      right: 20px;
      width: 50px;
      height: 50px;
      font-size: 50px;
      line-height: 50px;
      margin-top: -25px;
      color: #FFFFFF;
      opacity: .8;
    }

    .console-link-block .console-link-block-band {
      color: #fff;
      width: 100px;
      font-size: 12px;
      padding: 2px 0 3px 0;
      background-color: #E32A16;
      line-height: inherit;
      text-align: center;
      position: absolute;
      top: 8px;
      right: -30px;
      transform-origin: center;
      transform: rotate(45deg) scale(.8);
      opacity: .95;
      z-index: 2;
    }

    /** //统计快捷方式样式 */

    /** 设置每个快捷块的颜色 */
    .layui-row > div:nth-child(2) .console-link-block {
      background-color: #55A5EA;
    }

    .layui-row > div:nth-child(3) .console-link-block {
      background-color: #9DAFFF;
    }

    .layui-row > div:nth-child(4) .console-link-block {
      background-color: #F591A2;
    }

    .layui-row > div:nth-child(5) .console-link-block {
      background-color: #FEAA4F;
    }

    .layui-row > div:last-child .console-link-block {
      background-color: #9BC539;
    }
  </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
  <!-- 统计图表 -->
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md4 layui-col-sm6">
      <div class="layui-card" style="overflow: hidden;">
        <div class="layui-card-header">学员性别比例</div>
        <div class="layui-card-body">
          <div id="consoleChartsDay" style="height: 300px;"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md4 layui-col-sm6">
      <div class="layui-card" style="overflow: hidden;">
        <div class="layui-card-header">学员军衔</div>
        <div class="layui-card-body">
          <div id="consoleChartsWeek" style="height: 300px;"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md4 layui-col-sm6">
      <div class="layui-card" style="overflow: hidden;">
        <div class="layui-card-header" style="float: left">入学前学历</div>
        <div class="layui-card-body">
          <div id="consoleChartsMonth" style="height: 345px;"></div>
        </div>
      </div>
    </div>

  </div>
</div>
<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/libs/echarts/china.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts-wordcloud.min.js"></script>
<script>
  layui.use(['layer', 'admin','xmSelect'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var admin = layui.admin;
    var xmSelect = layui.xmSelect;

    var userNums = 0;
    admin.req(getProjectUrl() + 'sysUser/queryAll', function (res) {
      userNums = res.data.length;
      document.getElementById("sysuser").innerText = res.data[0].VALUS;
      document.getElementById("sysuser1").innerText = res.data[1].VALUS;
      document.getElementById("sysuser2").innerText = res.data[2].VALUS;
      document.getElementById("sysuser3").innerText = res.data[3].VALUS;
      document.getElementById("sysuser4").innerText = res.data[0].VALUS - res.data[3].VALUS - res.data[2].VALUS;
      document.getElementById("sysuser5").innerText = res.data[4].VALUS;
    }, 'get');
    //调查问卷统计
    getSuvery();
    /** 渲染日统计图表 */
    var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
    var options1 = {
      title: {
        text: '男女比例',
        textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'},
        subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
      },
      tooltip: {trigger: 'item'},
      legend: {
        orient: 'vertical', right: '0px', top: '0px',
      },
      series: []
    };
    myCharts1.setOption(options1);

    function getSuvery() {
      admin.req(getProjectUrl() + 'sysUserInfo/queryUserInfo', function (res) {
        debugger;
        // 饼状图赋值
        myCharts1.setOption({
          series: [{
            type: 'pie',
            radius: '70%',
            data: res.data.sex,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              },
            },
          }]
        });
        var rankList = res.data.rank;
        var xrank = [];
        var vrank = [];
        for (var i = 0;i < rankList.length;i++){
          var xname = rankList[i].name;
          var xvalue = rankList[i].value;
          xrank.push(xname);
          vrank.push(xvalue);
        }
        myCharts2.setOption({
          xAxis: {data: xrank},
          series: [{data: vrank}]
        });
        myCharts3.setOption({
          series: [{
            data: res.data.education
          }]
        })
      });
    }

    /** 军衔 */
    var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek'));
    var options2 = {
      tooltip: {},
      legend: {},
      xAxis: {
        name: '名称',
        nameTextStyle: {color: '#595959'},
        type: 'category',
        axisLabel: {
          rotate: 15,
          margin: 5
        }
      },
      yAxis: {
        name: '人数',
        type: 'value'
      },
      series: [
        {
          type: 'bar',
        }
        ],
      dataZoom: [{
        type: 'slider',
        state: 0,
        end: 100
      }]
    };
    myCharts2.setOption(options2);
    var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
    var options3 = {
      tooltip: {trigger: 'item',},
      legend: {
        top: '5%',
        left: 'center'
      },
      grid:{
        top:5
      },
      series: [{
        name: "入学前专业",
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        padAngle: 3,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 24,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
      }]
    };
    myCharts3.setOption(options3);
    /** 窗口大小改变事件 */
    window.onresize = function () {
      myCharts1.resize();
      myCharts2.resize();
      myCharts3.resize();
    };

  });
</script>
</body>
</html>
